<!--商品列表模块-->
<template>
  <view class="items-content" :class="isdrawlots == 1 ? 'isdrawlots' : isGtr == 1 ? 'isGtr' :'nodrawlots'">
    <view v-if="!!productList && productList.length > 0 && isdrawlots !== 1 && isGtr !== 1" class="shop_item_banner">
      <view v-for="(item, index) in productList" :key="index" class="list u-bg-color-white" @click.stop="jumpPage(item)"
        :data-itemId="item.itemId" :data-valueId="item.valueId" :data-valueName="item.valueName"
        :data-classId="item.classId" v-if="item.isGift != 1">
<!-- 
        {{JSON.stringify(item)}}
        {{JSON.stringify(item.activitySelection)}} -->
        <block v-if="item.itemId">
          <view class="image_box">
            <view class="newTag" v-if="filterChecked.fliterFrontTag(item.frontTag, 'NEW')">NEW</view>
            <block v-if="isSpecial > 0">
              <image mode="widthFix" :src="defaultImgUrl" class="image-class" />
              <image mode="widthFix" :data-index="index" :class="item.isLoad != true ? 'fade_out' : 'fade_out'"
                :src="item.hoverUrl ? item.hoverUrl : item.majorUrl" @load="finishLoad" />
            </block>
            <block v-else>
              <image mode="widthFix" :src="defaultImgUrl" class="image-class" />
              <image mode="widthFix" :data-index="index" :class="item.isLoad != true ? 'fade_out' : 'fade_out'"
                :src="item.majorUrl" @load="finishLoad" />
            </block>
          </view>

          <view class="cos-goods">
            <!-- 显示促销 -->
            <view v-if="!!item.promotionTag && item.promotionTag.length > 0">
              <block v-for="(item, index) in item.promotionTag" :key="index">
                <span class="goodsTag">{{ promotionTag + ' ' }}</span>
              </block>
            </view>
            <!-- {{JSON.stringify(!item.activitySelection)}} -->
            <view class="product_name ellipsis"
              :class="[isdrawlots?'draw':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']"
              v-if="showTitle && (!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus)">{{ item.itemName }}</view>
            <view class="activity_name ellipsis"
              :class="[isdrawlots?'draw':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']"
              v-if='!!item.activitySelection && item.activitySelection.dateStatus'>
              {{item.itemName}}
            </view>
            <!-- {{!!item.activitySelection ? JSON.stringify(item.activitySelection) : ''}} -->
            <view class="color-sub" v-if="!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus">
              {{item.propertyName + ':'}}{{item.valueName}}
            </view>
            <view class="activity_date"
              :class="[isdrawlots?'draw':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']" v-else>
              {{!!item.activitySelection ? item.activitySelection.dateStatus : ''}}
            </view>
            <view class="cos-product_info" v-if="(!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus)">
              <!-- 现价低于划线价，显示划线价  -->
              <view class="markPrice iphone12" v-if="item.markingPrice / 1 > item.price / 1"
                :class="isdrawlots?'draw':''">
                <!--              <view class="linePrice">
                  <text class="mark">¥</text>
                  {{ filterChecked.moneyFormat(item.markingPrice / 1, 2) }}
                </view> -->
                <view class="price">
                  <text class="mark">¥</text>
                  {{filterChecked.moneyFormat(item.price / 1 , 2)}}
                </view>
              </view>

              <view v-else>
                <view class="price iphone12" :class="isdrawlots?'draw':''">
                  <text class="mark">¥</text>
                  {{filterChecked.moneyFormat(item.price / 1, 2)}}
                </view>
              </view>
              <!--              <view class="markPrice rule-price-box" v-if="item.rulesArr.length > 0">
                <block v-for="(innerItem, innerIndex) in item.rulesArr" :key="innerIndex">
                  <view class="rule-price goodsTag">{{ innerItem.priceTag}} {{ '¥ ' + innerItem.strategyPrice}}</view>
                </block>
              </view>

              <!-- 自定义标签 -->
              <view v-if="!!item.customPromotionTags && item.customPromotionTags.length > 0">
                <promotionTagsTpl :promotionType.sync="customTag" :promotionTagData.sync="item.customPromotionTags"
                  :userGroupId.sync="groupId" :memberLevelGroup.sync="memberLevelId"
                  :memberStatus.sync="memberIsActive"></promotionTagsTpl>
              </view>

            </view>
            <view v-else class="activity_status"
              :class="[item.activitySelection.joinStatus=='开放登记信息'?'red':item.activitySelection.joinStatus=='等待公布结果'?'green':'',isdrawlots?'draw':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']">
              {{!!item.activitySelection ? item.activitySelection.joinStatus : ''}}
            </view>
            <view class="activity_btn"
              :class="[isdrawlots?'draw':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']"
              v-if="!!item.activitySelection && item.activitySelection.dateStatus">查看活动详情
            </view>
          </view>
        </block>
      </view>
    </view>
    <block v-if="isdrawlots == 1 || isGtr == 1">
      <view class=" jiantouleft" @click="swiperLeftTap">
        <image class="jiantou" mode="widthFix" src="https://100000063-1252208446.file.myqcloud.com/images/leftg.png">
        </image>
      </view>
      <view class=" jiantouright" @click="swiperRightTap">
        <image class="jiantou" mode="widthFix" src="https://100000063-1252208446.file.myqcloud.com/images/rightg.png">
        </image>
      </view>
    </block>
    <swiper interval="2000" duration="200" next-margin='400rpx' class="shop_item_banner"
      v-if="!!productList && productList.length > 0 && isdrawlots == 1" circular='true' @change='swiperChange'
      :current="outSwiperCurrent">
      <swiper-item v-for="(item, index) in productList" :key="index" class="list u-bg-color-white"
        :class="hasDrawFlag?'draw':''" @click.stop="jumpPage(item)" :data-itemId="item.itemId"
        :data-valueId="item.valueId" :data-valueName="item.valueName" :data-classId="item.classId"
        v-if="item.isGift != 1">
        <block v-if="item.itemId">
          <view class="image_box draw-image-box">
            <view class="newTag" v-if="filterChecked.fliterFrontTag(item.frontTag, 'NEW')">NEW</view>
            <block v-if="isSpecial > 0">
              <image mode="widthFix" :src="defaultImgUrl" class="image-class" />
              <image mode="widthFix" :data-index="index" :class="item.isLoad != true ? 'fade_out' : 'fade_out'"
                :src="item.hoverUrl ? item.hoverUrl : item.majorUrl" @load="finishLoad" />
            </block>
            <block v-else>
              <image mode="widthFix" :src="defaultImgUrl" class="image-class" />
              <image mode="widthFix" :data-index="index" :class="item.isLoad != true ? 'fade_out' : 'fade_out'"
                :src="item.majorUrl" @load="finishLoad" />
            </block>
          </view>
          <view class="cos-goods">
            <!-- 显示促销 -->
            <view v-if="!!item.promotionTag && item.promotionTag.length > 0">
              <block v-for="(item, index) in item.promotionTag" :key="index">
                <span class="goodsTag">{{ promotionTag + ' ' }}</span>
              </block>
            </view>
            <view class="product_name ellipsis"
              :class="[isdrawlots?'draw':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']"
              v-if="showTitle && (!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus)">{{ item.itemName }}</view>
            <view class="activity_name ellipsis"
              :class="[isdrawlots?'draw':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']"
              v-if='!!item.activitySelection && item.activitySelection.dateStatus'>
              {{item.itemName}}
            </view>
            <view class="color-sub" v-if="(!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus)">
              {{item.propertyName + ':'}}{{item.valueName}}
            </view>
            <view class="activity_date"
              :class="[isdrawlots?'draw':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']" v-else>
              {{!!item.activitySelection ? item.activitySelection.dateStatus : ''}}
            </view>
            <view class="cos-product_info" v-if="(!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus)">
              <!-- 现价低于划线价，显示划线价  -->
              <view class="markPrice iphone12" v-if="item.markingPrice / 1 > item.price / 1"
                :class="isdrawlots?'draw':''">
                <!--              <view class="linePrice">
                  <text class="mark">¥</text>
                  {{ filterChecked.moneyFormat(item.markingPrice / 1, 2) }}
                </view> -->
                <view class="price">
                  <text class="mark">¥</text>
                  {{filterChecked.moneyFormat(item.price / 1 , 2)}}
                </view>
              </view>

              <view v-else>
                <view class="price iphone12" :class="isdrawlots?'draw':''">
                  <text class="mark">¥</text>
                  <!-- {{ item.price / 1 }} -->{{filterChecked.moneyFormat(item.price / 1, 2)}}
                </view>
              </view>
              <!--         <view class="markPrice rule-price-box" v-if="item.rulesArr.length > 0">
                <block v-for="(innerItem, innerIndex) in item.rulesArr" :key="innerIndex">
                  <view class="rule-price goodsTag">{{ innerItem.priceTag}} {{ '¥ ' + innerItem.strategyPrice}}</view>
                </block>
              </view> -->

              <!-- 自定义标签 -->
              <view v-if="!!item.customPromotionTags && item.customPromotionTags.length > 0">
                <promotionTagsTpl :promotionType.sync="customTag" :promotionTagData.sync="item.customPromotionTags"
                  :userGroupId.sync="groupId" :memberLevelGroup.sync="memberLevelId"
                  :memberStatus.sync="memberIsActive"></promotionTagsTpl>
              </view>

            </view>
            <view v-else class="activity_status"
              :class="[item.activitySelection.joinStatus=='开放登记信息'?'red':item.activitySelection.joinStatus=='等待公布结果'?'green':'',isdrawlots?'draw':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']">
              {{!!item.activitySelection ? item.activitySelection.joinStatus : ''}}
            </view>
            <view class="activity_btn"
              :class="[isdrawlots?'draw':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']"
              v-if="!!item.activitySelection && item.activitySelection.dateStatus">查看活动详情
            </view>
          </view>
        </block>
      </swiper-item>
    </swiper>
    <!-- GTR门店商品 -->
    <swiper interval="2000" duration="200" next-margin='400rpx' class="shop_item_banner"
      v-if="!!storeProductList && storeProductList.length > 0 && isGtr == 1" circular='true' @change='swiperChange'
      :current="outSwiperCurrent">
      <swiper-item v-for="(item, index) in storeProductList" :key="index" class="list u-bg-color-white"
        @click.stop="jumpPage(item)" :data-itemId="item.id" :data-classId="item.classId">
        <block v-if="item.id">
          <view class="image_box">
            <image mode="widthFix" :src="defaultImgUrl" class="image-class" />
            <image mode="widthFix" :data-index="index" :class="item.isLoad != true ? 'fade_out' : 'fade_out'"
              :src="item.listImgUrl ? item.listImgUrl : item.imgUrl" />
          </view>
          <view class="cos-goods">
            <view class="product_name ellipsis" v-if="showTitle">{{ item.itemName }}</view>
            <view class="activity_btn">查看详情
            </view>
          </view>
        </block>
      </swiper-item>
    </swiper>

    <view v-if="hasMore > 0" class="hasMore">已到页面底部</view>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>
</template>

<script module="filterChecked" lang="wxs" src="../../utils/filter.wxs"></script>

<script>
  import api from '@/api/api';
  import util from '@/utils/util'
  import {
    SYSTEM_INFO,
    MERCHANT_INFO,
    CUSTOMER_INFO
  } from '@/utils/constant';
  import PromotionTagsTpl from "../promotionTags/promotionTags.vue";
  import BannerPlugin from '../wxparse/bannerPlugin';
  import { reportEvent, getEventIdByNavName, EVENT_ID } from '@/utils/ab-test.js';

  export default {
    components: {
      promotionTagsTpl: PromotionTagsTpl,
      bannerPlugin: BannerPlugin
    },
    props: {
      categoryforeignId: Number,
      categoryName: String,
      isSpecial: {
        type: Number,
        default: 0,
      },
      isdrawlots: {
        type: Number,
        default: 0,
      },
      isGtr: {
        type: Number,
        default: 0,
      },
      showTitle: {
        default: true
      },
    },
    data() {
      return {
        productList: [],
        customPromotionArr: [],
        currentPage: 1,
        pageSize: 50,
        pageTotal: 0,

        finishLoadFlagSon: this.finishLoadFlag,
        markingPrice: '',
        price: '',
        linePrice: false,
        nowPrice: false,
        frontProperties: [],
        defaultImage: 'https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/default.png',
        //原始图片
        originalImage: String,
        width: String,
        height: String,
        imageHeight: 505,
        jumpHandleNames: ['jump_a', 'jump_b', 'jump_c'],
        promotionTagData: [],
        memberLevelGroup: String,
        memberStatus: String,
        userGroupId: String,

        promotionType: String,
        genneralTag: 'genneral_tag',
        customTag: 'custom_tag',

        forwardPurchaseGoods: false,
        tempItemId: String,
        tempValueId: String,
        tempFrontCode: String,
        defaultImgUrl: "",
        iphoneModel: 0,
        outSwiperCurrent: 0,
        hasDrawFlag: false,
        storeProductList: [],
        afterPage: ''
      };
    },
    mounted() {
      this.imageHeight = 360 / uni.getStorageSync('imageScaling');
      let imageScaling = uni.getStorageSync('imageScaling')
      this.defaultImgUrl = imageScaling == 2 / 3 ?
        "https://100000000-1252208446.cos.ap-shanghai.myqcloud.com/images/2-3.png" : imageScaling == 3 / 4 ?
        "https://100000000-1252208446.cos.ap-shanghai.myqcloud.com/images/3-4.png" : imageScaling == 4 / 5 ?
        "https://100000000-1252208446.cos.ap-shanghai.myqcloud.com/images/4-5.png" : imageScaling == 1 / 1 ?
        "https://100000000-1252208446.cos.ap-shanghai.myqcloud.com/images/1-1.png" :
        "https://100000000-1252208446.cos.ap-shanghai.myqcloud.com/images/1-1.png"

      let isIos = uni.getSystemInfoSync().system.indexOf('iOS')
      let platform = uni.getSystemInfoSync().model
      if (isIos == 0) {
        if (platform.indexOf('12') !== -1 || platform.indexOf('13') !== -1) {
          if (platform.indexOf('Max') !== -1) {
            this.iphoneModel = 1
          } else {
            this.iphoneModel = 2
          }
        }
      }
      if (this.categoryforeignId) {
        this.getCateGoods(this.categoryforeignId, '', '', '')
      }
      this.getStoreGoods();
    },

    watch: {
      hasMore: function(newVal, oldVal) {
        this.hasMore = newVal;
      },

      categoryforeignId: function(newVal, oldVal) {
        this.categoryforeignId = newVal;
        this.getCateGoods(this.categoryforeignId, '', '', '')
      }
    },
    methods: {
			/**
			 * 展示弱提示
			 * @param {Object} msg 文案
			 */
			handleShowTextToast(msg){
				try{
					this.$refs.toastPopup.showToast(msg);
				}catch(e){}
			},
			/**
			 * 若提示按钮点击回调
			 * @param {Object} data.type 类型：confirm确定，cancel取消
			 * @param {Object} data.callBackData 呼气弹窗时传入的数据
			 */
			onToastPopupClick(data){},
      // 外层轮播图,点击左右切换
      swiperLeftTap: function() {
        let that = this;
        if (this.outSwiperCurrent == 0) {
          if (!!this.isGtr) {
            this.outSwiperCurrent = this.storeProductList.length - 1; //衔接滑动
          } else {
            this.outSwiperCurrent = this.productList.length - 1; //衔接滑动
          }
        } else {
          this.outSwiperCurrent = this.outSwiperCurrent - 1;
        }
        this.$forceUpdate()
      },

      swiperRightTap: function() {
        let that = this;
        if (!!this.isGtr) {
          if (this.outSwiperCurrent == this.storeProductList.length - 1) {
            this.outSwiperCurrent = 0; //衔接滑动
          } else {
            this.outSwiperCurrent = this.outSwiperCurrent + 1;
          }
        } else {
          if (this.outSwiperCurrent == this.productList.length - 1) {
            this.outSwiperCurrent = 0; //衔接滑动
          } else {
            this.outSwiperCurrent = this.outSwiperCurrent + 1;
          }
        }
        this.$forceUpdate()
      },
      swiperChange(e) {
        let current = e.target.current;
        this.outSwiperCurrent = current;
      },
      //抽签时间控制
      async drawControl(listarr) {
        let that = this
        let listArr = listarr

        for (let i = 0; i < listArr.length; i++) {
          if (listArr[i].activitySelection) {
            that.$commonFunction.timeStatus(listArr[i]).then(res => {
              listArr[i].activitySelection.dateStatus = res.dateStatus
              listArr[i].activitySelection.joinStatus = res.joinStatus
            }).catch(err => {
            })

            // listArr[i].activitySelection.dateStatus = await this.timeStatus(listArr[i]).dateStatus
            // listArr[i].activitySelection.joinStatus = await this.timeStatus(listArr[i]).joinStatus

          }
        }
        this.productList = listArr
        this.hasDrawFlag = listArr.filter((item) => item.activitySelection).length > 0 ? true : false

      },
      timeStatus(item) {
        let nowTime = new Date().getTime()
        let drawStartTime = item.activitySelection.activitySelectionStartTime
        let drawEndTime = item.activitySelection.activitySelectionEndTime
        let promulgateTime = item.activitySelection.promulgateTime
        let buyEndTime = item.activitySelection.buyEndTime
        let activityStopTime = item.activitySelection.activityStopTime
        let obj = {}
        let showTime;
        let showText;

        if (nowTime < drawStartTime) {
          showTime = util.timeFormat(drawStartTime) + ' 开始登记'
          showText = '未开放登记信息'
        } else if (nowTime > drawStartTime && nowTime < drawEndTime) {
          showTime = util.timeFormat(drawEndTime) + ' 登记结束'
          showText = '开放登记信息'
        } else if (nowTime > drawEndTime && nowTime < promulgateTime) {
          showTime = util.timeFormat(promulgateTime) + ' 公布结果'
          showText = '等待公布结果'
        } else if (nowTime > promulgateTime && nowTime < buyEndTime) {
          showTime = util.timeFormat(buyEndTime) + ' 活动结束'
          showText = '结果已公布'
        } else if (nowTime > buyEndTime && nowTime < activityStopTime) {
          showTime = util.timeFormat(buyEndTime) + ' 活动结束'
          showText = '活动已结束'
        } else {
          showTime = ''
          showText = ''
        }
        obj.dateStatus = showTime
        obj.joinStatus = showText
        return obj
      },
      /**
       * 分类商品列表
       */
      getCateGoods: async function(class_id, merchant_id, store_id, is_sort) {
        let that = this;
        let customerInfo = uni.getStorageSync('customerInfo');
        let memberDetails = uni.getStorageSync('memberDetails')
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
        let after = that.currentPage == 1 ? '' : that.afterPage
        that.$commonFunction.doSearchGoods(class_id, '', that.currentPage, that.pageSize, after, '', is_sort, '',
          '', '', '').then((res) => {
          that.afterPage = res.data.afterPage
          var cateProductList = res.data.content;
          let itemsList = res.data;
          that.page_total = Math.ceil(res.data.total / 16);
          // 策略价格
          var s_item = [];
          for (var i in cateProductList) {
            s_item = cateProductList[i];
            if (!!cateProductList[i].strategies) {

              that.$commonFunction.priceRulesDeal(cateProductList[i].strategies,cateProductList[i].itemCode).then(res => {
                if (res.price !== 0) {
                  cateProductList.map(itey => {
                    if (itey.itemCode == res.itemCode) {
                      itey.price = res.price
                    }
                  })
                }
                if (res.rulesArr.length > 0) {
                 cateProductList.map(itey => {
                    if (itey.itemCode == res.itemCode) {
                      itey.rulesArr = res.rulesArr
                    }
                  })
                }
              }).catch(err => {
                
              })
            }

            var customPromotionTags = [];
            var isForwardpurchaseGoods = false;
            if (s_item['promotionTagList']) {
              for (var t in s_item['promotionTagList']) {
                var tagItem = s_item['promotionTagList'][t];
                if (tagItem.promotionType == 'custom_tag') {
                  customPromotionTags.push(tagItem);
                }

                if (tagItem.promotionType == 'forward_purchase') {
                  isForwardpurchaseGoods = true;
                }
              }
              let tempTagList = customPromotionTags.slice();
              tempTagList.sort((a, b) => {
                return a.sortOrder - b.sortOrder;
              });
              that.customPromotionArr = tempTagList;
            }

          }
          this.productList = cateProductList
          for (let i = 0; i < cateProductList.length; i++) {
            if (cateProductList[i].skuCodes !== undefined) {
              this.$sr.track('expose_sku_component', {
                sku: {
                  sku_id: cateProductList[i].skuCodes[0].toString(),
                  sku_name: cateProductList[i].itemName // 若商品无sku_name时，可传spu_name信息
                },
                spu: {
                  spu_id: !!uni.getStorageSync('openOuterItemId') ? cateProductList[i].outerItemId : !!uni.getStorageSync('youshuOpencc') ? cateProductList[i].frontCode.toString() : cateProductList[i].itemCode.toString(),
                  spu_name: !!uni.getStorageSync('youshuOpencc') ? cateProductList[i].itemName + cateProductList[i].valueName : cateProductList[i].itemName // 若商品无spu_name时，可传sku_name信息
                },
                sku_category: [{
                  sku_cat_id: cateProductList[i].categoryId.toString(),
                  sku_cat_name: '全部商品',
                  sku_parent_cat_id: 'null' // 若已是顶级类目，传"null"
                }],
                "shipping_shop": {
                  "shipping_shop_id": merchantInfo.cloudMerchantId.toString(), // 到家类型对接智慧零售入口必传
                  "shipping_shop_name": "THE MACALLAN EBOUTIQUE麦卡伦" // 到家类型对接智慧零售入口必传
                },
                sale: {
                  original_price: parseFloat(cateProductList[i].price), // 对接智慧零售入口必传
                  current_price: parseFloat(cateProductList[i].price) // 对接智慧零售入口必传
                },
                primary_image_url: cateProductList[i].majorUrl
                // more...
              });
            }
          }
          if (this.isdrawlots == 1) {
            let productArr = this.productList;
            this.productList = this.productList.slice(0, 5);
          }

          this.drawControl(this.productList)
        }).catch((err) => {
          this.handleShowTextToast(err.msg);
        })
        // 获取商品列表
        // const json = await api.getGoodsList({
        //   query: {
        //     class_id: class_id || '',
        //     page_no: that.currentPage,
        //     page_size: that.pageSize,
        //     merchant_id: merchantInfo.cloudMerchantId || merchant_id,
        //     store_id: merchantInfo.cloudMerchantStoreId || store_id,
        //     is_sort: is_sort,
        //     group_id: customerInfo.groupId || 0,
        //     member_level_id: memberDetails.memberLevelId || 0,
        //     member_status: memberDetails.isActive || 'Inactive'
        //   }
        // });
        // if (json.code === 1000) {
        // }
      },
      /**
       * GTR门店商品列表
       */
      getStoreGoods: async function(class_id, merchant_id, store_id, is_sort) {
        let that = this;
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
        let customerInfo = uni.getStorageSync('customerInfo');
        // 获取门店商品列表
        const json = await api.getStoreGoodsList({
          query: {
            merchantId: merchantInfo.cloudMerchantId,
            // itemName: '',
            page: that.currentPage,
            size: that.pageSize,
            // sort: is_sort,
            // sortDir: 1,
          }
        });
        if (json.code === 1000) {
          this.storeProductList = json.data.content;
        }
      },
      jumpPage(item) {
        reportEvent(EVENT_ID.CATEGORY.SHANG_CHENG);
        reportEvent(getEventIdByNavName(this.categoryName));
        let that = this;
        let itemId = item.itemid;
        let valueId = item.valueid;
        let valueName = item.valuename;
        let classId = item.classid;
        let clTrackPrams = {
          'c_from': '来源：搜索',
          'c_product_name': item.itemName,
          'c_product_brand': '麦卡伦 Macallan',
          'c_product_price': item.price,
          'c_product_year': '',
          'c_product_series': '',
          'c_product_scenarios': '',
          'c_product_taste': '',
          'c_product_alcoholconcentration': '',
          'c_product_volume': item.valueName,
          'c_product_id': item.itemId,
        }
        getApp().commonClTrack('c_ebmp_click_search_recommend', clTrackPrams)
        if (!!this.isGtr) {
          uni.navigateTo({
            url: '/pages/GTR/item?id=' +
              item.id
          });
        } else {
          uni.navigateTo({
            url: '/pages/item/item?id=' +
              item.itemId +
              '&valueId=' +
              item.valueId +
            "&hasExpose=true"
          });
        }
      },

      finishLoad: function(e) {
        let that = this;
        setTimeout(() => {
          that.productList[e.currentTarget.dataset.index].isLoad = true;
          that.finishLoadFlagSon = 1;
        }, 300);
      },

      // cms组件点击事件
      cmsClickHandle(e) {
        let handleName = e.target.dataset.handle || '';
        let text = e.target.dataset.text || '';
        if (!handleName) {
          return;
        }

        this.$EFSTracking.trackingAction('CLICK_LIST_PAGE', JSON.stringify({
          "handleName": handleName,
          "text": text
        }), {});

        // 锚点链接
        if (this.jumpHandleNames.indexOf(handleName) !== -1) {
          const query = uni.createSelectorQuery().in(this);
          query.select('#' + handleName).boundingClientRect()
          query.selectViewport().scrollOffset()
          query.exec(function(res) {
            uni.pageScrollTo({
              scrollTop: res[0].top + res[1].scrollTop - 60,
              duration: 500
            });
          })
        }
      }
    }
  };
</script>
<style lang="less">
  .isdrawlots {
    .list {
      width: 310rpx !important;
      padding-left: 10rpx !important;
      background: #f7f5f4 !important;
    }
  }

  .jiantou {
    width: 24rpx;

  }

  .jiantouleft {
    position: absolute;
    z-index: 2;
    top: 115rpx;
    left: 10rpx;
    width: 80rpx;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
    padding-top: 18rpx;
  }

  .jiantouright {
    position: absolute;
    height: 84rpx;
    z-index: 2;
    line-height: 84rpx;
    top: 115rpx;
    right: 10rpx;
    width: 80rpx;
    text-align: center;
    padding-top: 18rpx;
  }

  .isdrawlots {
    position: relative;

    .list {
      height: 548rpx !important;
      display: flex;
      flex-direction: column;

      .cos-goods {
        flex: 1
      }

      &.draw {
        height: 604rpx !important;
      }
    }
  }

  .shop_item {
    padding: 0rpx 20rpx;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 30rpx;
  }

  .nodrawlots .shop_item_banner {
    // margin: 0rpx 1.25%;
    display: flex;
    // display:-webkit-inline-box;
    flex-wrap: wrap;
    // padding-bottom: 28rpx;
    padding: 0 2%;
    width: 100%;
    justify-content: space-between;

    .list {
      display: inline-block;
      overflow: hidden;
    }
  }

  .product_name {
    line-height: 46rpx;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 28rpx;
    text-align: center;
    margin: 20rpx 0 16rpx 0;
    padding: 0 20rpx;

    &.draw {
      line-height: 44rpx;
      font-size: 26rpx;
    }
  }

  .activity_name {
    line-height: 46rpx;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 28rpx;
    // font-weight: 600;
    padding: 0 20rpx;
    margin: 20rpx 0 16rpx 0;

    &.draw {
      line-height: 44rpx;
      font-size: 26rpx;
      /* margin: 20rpx 0 24rpx 0; */
    }
  }

  .hasMore {
    margin-bottom: 100rpx;
    font-size: 12px;
    color: #444;
    width: 100%;
    text-align: center;
    margin-top: 20rpx;
  }

  // .list:nth-child(even) {
  //   margin-right: 0;
  // }

  .navigator-hover {
    background: none;
    opacity: 1;
  }

  .bannerList {
    width: 100%;
  }

  .isdrawlots .list {
    margin: 0;
  }

  .list {
    vertical-align: top;
    margin-bottom: 2.3%;
    width: 48.94%;

    .image_box {
      position: relative;
      overflow: hidden;
      font-size: 0;

      image {
        // width: 347.88rpx;
        // height: 505rpx;
        width: 100%;
        opacity: 1;
      }
    }

    .draw-image-box {
      image {
        // width: 347.88rpx;
        // height: 505rpx;
        min-height: 310rpx;
        width: 100%;
        opacity: 1;
      }
    }

    .activity_date {
      line-height: 24rpx;
      font-size: 22rpx;
      padding-left: 20rpx;

      &.draw {
        font-size: 19rpx;
        line-height: 19rpx;
      }

      &.iphone12 {
        line-height: 24rpx;
      }
    }

    .activity_status {
      padding: 20rpx;
      color: rgb(181, 181, 181);
      font-size: 24rpx;

      &.green {
        color: rgb(90, 166, 138);
      }

      &.red {
        color: rgb(156, 81, 91);
      }

      &.draw {
        font-size: 22rpx;

        &.iphone12 {
          padding: 18rpx 20rpx 20rpx;
        }
      }
    }

    .activity_btn {
      margin: 0 20rpx;
      background-color: #000;
      color: #fff;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      &.draw {
        font-size: 22rpx;
      }
    }

    // 划线价
    .markPrice {
      display: flex;
      justify-content: center;

      &.iphone12 {
        padding: 22rpx 20rpx 20rpx;
      }

      .linePrice {
        text-decoration: line-through;
        text-align: left;
        line-height: 32rpx;
        font-size: 32rpx;

        &.draw {
          font-size: 30rpx;
        }
      }

      .nowPrice {
        margin-left: 10rpx;
        color: #862633;
        text-align: left;
        font-size: 32rpx;
        line-height: 32rpx;

        &.draw {
          font-size: 30rpx;
        }
      }
    }

    .mark {
      line-height: 14px;
      font-size: 14px;
      margin-right: 2rpx;
    }

    .price {
      font-size: 32rpx;
      text-align: center;
      line-height: 40rpx;

      &.draw {
        font-size: 30rpx;
        line-height: 28rpx;
      }

      &.iphone12 {
        padding: 20rpx;
      }
    }

    .color-sub {
      color: #aeaeae;
      line-height: 24rpx;
      font-size: 24rpx;
      text-align: center;
      /* padding-bottom: 20rpx; */
    }

    // 色块
    .colorBlock {
      display: flex;
      flex-wrap: wrap;

      .skuImageUrl {
        margin: 0 12rpx 0 0;
        padding: 5px 0;
        width: 26rpx;
        height: 26rpx;

        image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }

    .cost_price {
      color: #666666;
      text-decoration: line-through;
      font-weight: 600;
    }

    .sale_num {
      color: #666666;
      font-size: 22rpx;
    }

    .goods {
      display: flex;
      justify-content: space-between;
      padding: 15rpx 12rpx;
    }

    .product_info {
      display: flex;
      align-items: flex-end;
    }

    .cost_price {
      padding-left: 20rpx;
    }

    .sale_num {
      padding-left: 20rpx;
    }
  }

  /*样式*/
  .cos-goods {
    // width: 351rpx;
    overflow: hidden;
    background: #fff;
    padding-bottom: 20rpx;

    .colorChoose {
      width: 60%;
      display: flex;
      flex-flow: row wrap;
      justify-content: left;
      align-content: flex-start;
      height: 100rpx;

      .color-item {
        width: 11px;
        height: 11px;
        background: #000000;
        margin: 10rpx 0 0 10rpx;
      }
    }
  }

  .list .image_box image.before-load {
    width: 0;
    height: 0;
    opacity: 0;
  }

  .list .image_box image.fade_out {
    animation: opacity 0.5s 1;
    animation-fill-mode: forwards;
    position: absolute;
    left: 0;
    top: 0;
    // width: 347.88rpx;
    // height: 505rpx;
  }

  @keyframes opacity {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .marker-text {
    color: #bb762b;
    font-size: 24rpx;
  }

  // new标签样式
  .newTag {
    font-family: Gill Sans MT Pro;
    font-weight: 400;
    letter-spacing: 0.0825em;
    position: absolute;
    top: 16rpx;
    left: -8rpx;
    padding: 0 16rpx;
    color: #ffffff;
    background-color: #b89978;
    z-index: 1;
    font-size: 18rpx;
    line-height: 36rpx;
  }

  .goodsTag {
    color: #ff571a;
    font-size: 24rpx;
    margin-right: 6rpx;
  }

  .saleBox {
    display: flex;
    line-height: 36rpx;
    flex-flow: row wrap;
  }

  .saleBox label {
    color: #ff571a;
    font-size: 24rpx;
    margin-right: 30rpx;
  }

  .tag2 {
    color: #8D9AAB;
  }

  .rule-price-box {
    display: flex;
    flex-flow: row wrap;
  }

  .isdrawlots {
    width: 100%;
    overflow-x: auto;
    z-index: 1;

    .shop_item_banner {
      display: -webkit-inline-box;
      height: 610rpx;
      width: 100%;
      // display: inline-flex;
      justify-content: space-between;
      align-items: center;
    }

    .list {
      margin-left: 1%;
      width: 310rpx;
    }

    .list:last-child {
      margin-right: 1%;
    }
  }

  .isGtr {
    width: 100%;
    overflow-x: auto;
    z-index: 1;
    position: relative;

    .shop_item_banner {
      display: -webkit-inline-box;
      height: 525rpx;
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
    }

    .list {
      margin-left: 1% !important;
      height: 515rpx !important;
      display: flex;
      flex-direction: column;
      background: #f7f5f4 !important;
      width: 310rpx !important;
      padding-left: 10rpx !important;
      background: #f7f5f4 !important;
    }

    .list:last-child {
      margin-right: 1% !important;
    }

    .cos-goods {
      flex: 1
    }
  }
</style>
